{extend name="base" /}
{block name="css"}
<link href="__STATIC__/zjs/css/swiper-3.4.1.min.css" rel="stylesheet"/>
{/block}
 {block name="body"}
    <!--轮播banner start-->
	<div class="swiper-container">
                <div class="swiper-wrapper">
                   {volist name="slide" id="vo"}
                        <div class="swiper-slide"><a href="{$vo.link}"><img src="{$vo.image}" alt="" width="100%"></a></div>
                   {/volist}
               </div>
               <!-- Add Pagination -->
               <div class="swiper-pagination"></div>
        </div>	
	<!--轮播banner end-->
	<!--员工排行榜 start-->
	<div class="lists">
		<ul class="list_ul">
			<li id="list_li_1"><img src="__STATIC__/zjs/images/list_05.jpg" alt="" width="100%"></li>
			<li id="list_li_2"><img src="__STATIC__/zjs/images/list_06.jpg" alt="" width="100%"></li>
		</ul>
	</div>
	<div class="staff_list">
		<ul class="list_content">
			{volist name="arr" id="vo" key="k" }
				<li>
					<div class="list_img"><img src="{$vo.url}" alt=""></div>
					<div class="list_info">
						<p class="list_name">{$vo.zjsuser}</p>
						<p class="list_name_info"><span>排名：第{$k}名</span><span>部门：{$vo.bumen}</span><span class="list_info_right">{$vo.tjnum}对</span></p>
					</div>
				</li>
			{/volist}
		</ul>
		<!--<p class="list_more">滑动加载更多</p>-->
	</div>
        <!--员工排行榜 end-->
         {/block}
{block name="js"}
    <script src="__STATIC__/zjs/js/swiper-3.4.1.min.js" type="text/javascript"></script>
{/block}
{block name="script"}
    <script type="text/javascript">
            $(function(){
                var swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    paginationClickable: true,
                    spaceBetween: 30,
                    centeredSlides: true,
                    autoplay: 2500,
                    autoplayDisableOnInteraction: false
                });
                $("#list_li_1").click(function(){
			$(this).children("img").attr("src","__STATIC__/zjs/images/list_05.jpg");
			$(this).siblings("li").children("img").attr("src","__STATIC__/zjs/images/list_06.jpg");
		})
		$("#list_li_2").click(function(){
			$(this).children("img").attr("src","__STATIC__/zjs/images/list_07.jpg");
			$(this).siblings("li").children("img").attr("src","__STATIC__/zjs/images/list_04.jpg");
		})
            });
    </script>
{/block}